<template>
	<view class="vip-container">
		<view class="vip-content">
			<view class="title">成为VIP会员</view>
			<view class="quickness">急速使用本站全部功能</view>
			<view class="pay" @click="change(0)">
				<button  type="default" :style="{color:style99.color,border:style99.border}">￥99元尊享1个月</button>
			</view>
			<view class="pay" @click="change(1)">
				<button  type="default" :style="{color:style399.color,border:style399.border}">￥399元尊享1个月</button>
			</view>
			
			<view class="button-list">
				<button type="default">取消</button><button type="default">确定</button>
			</view>
			
			<view class="demo" @click="skipShare">
				查看分享演示
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				style99:{color:'#3965FF',border:' 4rpx solid #007AFF'},
				style399:{color:'',border:''}
			};
		},
		methods:{
			change(i){
				if(i){
					this.style99={}
					this.style399={color:'#3965FF',border:' 4rpx solid #007AFF'}
				}else{
					this.style399={}
					this.style99={color:'#3965FF',border:' 4rpx solid #007AFF'}
				}
			},
			skipShare(){
				uni.navigateTo({
					url:'/pages/shareVideo/shareVideo'
				})
			}
		}
	}
</script>

<style scoped>
	.vip-container {
		width: 100%;
		height: 1524rpx;
		background: rgba(0, 0, 0, 0.5);
		overflow: hidden;
		position: fixed;
		top: 0;
		right: 0;
		font-family: PingFang TC;
		font-style: normal;
		font-weight: 600;
		font-size: 76rpx;
		text-align: center;
		color: rgba(0, 0, 0, 0.85);
	}

	.vip-container .vip-content {
		margin: 416rpx 50rpx;
		width: 650rpx;
		height: 790rpx;
		background-color: #FFFFFF;
	}

	.vip-container .vip-content .title {
		padding-top: 48rpx;
	}

	.vip-container .vip-content .quickness {
		margin-top: 4rpx;
		font-size: 32rpx;
		font-weight: normal;
		color: rgba(0, 0, 0, 0.45);
	}

	.vip-container .vip-content .pay {
		margin: 0 auto;
		width: 530rpx;
		height: 120rpx;
		margin-top: 64rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 600;
		font-size: 36rpx;
		text-align: center;
	}

	.vip-container .vip-content .pay button {
		color: rgba(0, 0, 0, 0.85);
		background-color: #FFFFFF;
		width: 100%;
		height: 100%;
		line-height: 120rpx;
		box-sizing: border-box;
	}
	

	.vip-container .vip-content .pay:nth-child(4){
		margin-top: 20rpx;
	}
	
	.vip-container .vip-content .button-list{
		width: 566rpx;
		height: 80rpx;
		margin: 0 auto;
		margin-top: 64rpx;
		display: flex;
	}
	
	.vip-container .vip-content .button-list button{
		width: 276rpx;
		height: 100%;
		background: #FFFFFF;
		border: 2rpx solid #3965FF;
		box-sizing: border-box;
		border-radius: 8rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 550;
		font-size: 36rpx;
		line-height:80rpx;
		text-align: center;
		color: #3965FF;
	}
	
	.vip-container .vip-content .button-list button:nth-child(2){
		background: linear-gradient(90deg, #3965FF 0%, rgba(57, 101, 255, 0.8) 100%);
		color: #FFFFFF;
	}
	
	.vip-container .vip-content .demo{
		margin-top: 40rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 550;
		font-size: 32rpx;
		color: rgba(0, 0, 0, 0.5);
	}
	
</style>